import Konva from 'konva'
import { useRef } from 'react'
import { Group, Layer, Rect, Stage } from 'react-konva'
import styles from './index.module.less'

export default function View() {
  const groupRef = useRef<Konva.Group>(null)
  const rect1Ref = useRef<Konva.Rect>(null)

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group
          width={500}
          height={500}
          ref={groupRef}
          onMouseDown={e => {
            e.target.getStage().container().className = styles.crosshair
          }}
          onMouseUp={e => {
            e.target.getStage().container().className = ''
          }}
          draggable
          onDragStart={() => {
            groupRef.current.stopDrag()
            rect1Ref.current.startDrag()
          }}
        >
          <Rect width={500} height={500} fill='yellow' />
          <Rect
            ref={rect1Ref}
            width={20}
            height={20}
            x={15}
            y={15}
            fill='red'
            onDragStart={(evt: Konva.KonvaEventObject<DragEvent>) => {
              // 取消冒泡
              evt.cancelBubble = true
            }}
          />
          <Rect width={20} height={20} x={40} y={40} fill='skyblue' />
          <Rect width={20} height={20} x={80} y={80} fill='gray' />
        </Group>
      </Layer>
    </Stage>
  )
}
